<template>
  <Mnleft />
  <Mnxlcontent ref="contentRef" />
  <Mnright @Termination="Termination" />
</template>

<script setup>
import { ref, provide } from 'vue'
import Mnleft from './components/left/index.vue'
import Mnright from './components/right/index.vue'
import Mnxlcontent from './components/content/index.vue'

// 控制步骤条显示的状态
const showSteps = ref(true)

// 控制倒计时提示显示的状态
const showTip = ref(true)

// 控制右侧面板显示的状态 默认为 true 隐藏
const showRight = ref(false)
// 获取子组件实例
const contentRef = ref(null)

// 启动倒计时函数
const startCountdown = async () => {
  // 调用子组件的 startCountdown 方法
  if (contentRef.value) {
    await contentRef.value.startCountdown()
    showRight.value = false
  }
}

// 提供数据和方法给子组件
provide('startCountdown', startCountdown)
provide('showSteps', showSteps)
provide('showTip', showTip)
provide('showRight', showRight)


const Termination = () => {
  if (!contentRef.value) return
  contentRef.value.terminateProcess()
}
</script>

<style lang="less" scoped></style>